<template>
    <h2 ref="h2">ref属性：1.获取dom元素，2.子组件实例</h2>
    <input type="text" ref="inp">
    <hr>
    <Child :count="count" ref="child"/>
    <button @click="getChild">获取子组件实例</button>
</template>
<script setup lang='ts'>
import { ref,reactive,onMounted} from 'vue'
import Child from "./Child.vue";
// const inp = ref(null)
const count = ref(10)
//创建的ref属于绑定到dom元素上的，需要传递类型校验，元素的类型
const inp = ref<HTMLInputElement | null>(null)
const h2 = ref<HTMLHeadingElement | null>(null)
// const h2 = ref<HTMLHeadingElement>() 也可以
//进入页面input获取焦点
onMounted(()=>{
    document.querySelector("h2")
    // inp.value.focus()//报错 inp.value可能为null
    //inp.value?存在吗，如果存在继续调用
    inp.value?.focus()
    h2.value?h2.value.style.color='red':""
})



//定义ref 获取子组件实例 ------ ts-js 一样------
const child = ref()
const getChild = ()=>{
    console.log("---------",child.value);
    //需要在子组件里面暴露出来
    child.value.myRefChild()
}
</script>
<style scoped lang='scss'>
</style>